<!--
 * @Author: your name
 * @Date: 2020-12-28 17:53:01
 * @LastEditTime: 2020-12-29 14:15:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicvue\vuehtml\vueindex.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/v-on.css">
    <script src="../assets/js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <a href="../index.html" class="retu">BACK</a>
        <h1>使用绑定事件监听器,编写一个加分减分的程序</h1>
        <span>本场比赛的得分：{{ count }}</span>
        <div>
            <button v-on:click="addScore">加分</button>
            <!---v-on:click还有一种简单的写法,就是用@代替--->
            <button @click="reduceScore">减分</button>
            <span>请输入比分：</span>
            <input type="text" v-on:keyup.13="onEnter" v-model="secondCount"/>
        </div>
    </div>
    <script>
        let app = new Vue({
            el : '#app',
            data:{
              count : 1,
              secondCount:2
            },
            methods: {
                //加分
                addScore:function(){
                    this.count++;
                },
                //减分
                reduceScore:function(){
                    if(this.count > 0){
                        this.count--;
                    }else{
                        this.count = 0;
                    }
                },
                //回车加分
                onEnter:function(){
                    if(this.count > 0){
                        //因为文本框的数字回默认转化为字符串，所以我们需要使用parseInt来对数据进行转化
                        this.count += parseInt(this.secondCount);
                        if(this.count <= 0){
                            this.count = 0;
                        }
                    }else{
                        this.count = 0;
                    }
                }
            }
        });
    </script>
</body>
</html>